<template>
  <view>
    <view
      id="_drag_button"
      class="drag"
      :style="'left: ' + left + 'px; top:' + top + 'px;'"
      @touchstart="touchstart"
      @touchmove.stop.prevent="touchmove"
      @touchend="touchend"
      @click.stop.prevent="click"
      :class="{ transition: isDock && !isMove }"
    >
      <uni-icons type="home-filled" size="18" color="#2B93ED"></uni-icons>
      <text style="margin-left: 5rpx">进入首页</text>
    </view>
  </view>
</template>

<script>
import { isH5 } from '@/utils/platform';
export default {
  name: 'drag-button',
  props: {
    isDock: {
      type: Boolean,
      default: false,
    },
    existTabBar: {
      type: Boolean,
      default: false,
    },
    headpiece: {
      type: Number,
      default: 340,
    },
  },
  data() {
    return {
      top: 0,
      left: 0,
      width: 0,
      height: 0,
      offsetWidth: 0,
      offsetHeight: 0,
      windowWidth: 0,
      windowHeight: 0,
      isMove: true,
      edge: 10,
      text: '按钮',
    };
  },
  mounted() {
    const sys = uni.getSystemInfoSync();

    this.windowWidth = sys.windowWidth;
    this.windowHeight = sys.windowHeight;

    // #ifdef APP-PLUS
    this.existTabBar && (this.windowHeight -= 50);
    // #endif
    if (sys.windowTop) {
      this.windowHeight += sys.windowTop;
    }
    console.log(sys);

    const query = uni.createSelectorQuery().in(this);
    query
      .select('#_drag_button')
      .boundingClientRect((data) => {
        this.width = data.width;
        this.height = data.height;
        this.offsetWidth = data.width / 2;
        this.offsetHeight = data.height / 2;
        this.left = this.windowWidth - this.width - this.edge;
        // this.top = this.windowHeight - this.height - this.edge;
        this.top = this.headpiece;
      })
      .exec();
  },
  methods: {
    click() {
      this.$emit('btnClick');
    },
    touchstart(e) {
      this.$emit('btnTouchstart');
    },
    touchmove(e) {
      // 单指触摸
      if (e.touches.length !== 1) {
        return false;
      }

      this.isMove = true;

      this.left = e.touches[0].clientX - this.offsetWidth;

      let clientY = e.touches[0].clientY - this.offsetHeight;
      // #ifdef H5
      clientY += this.height;
      // #endif
      let edgeBottom = this.windowHeight - this.height - this.edge;

      // 上下触及边界
      if (clientY < this.edge) {
        this.top = this.edge;
      } else if (clientY > edgeBottom) {
        this.top = edgeBottom;
      } else {
        this.top = clientY;
      }
    },
    touchend(e) {
      if (this.isDock) {
        let edgeRigth = this.windowWidth - this.width - this.edge;

        if (this.left < this.windowWidth / 2 - this.offsetWidth) {
          this.left = this.edge;
        } else {
          this.left = edgeRigth;
        }
      }

      this.isMove = false;

      this.$emit('btnTouchend');
    },
  },
};
</script>

<style lang="scss">
.drag {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6upx rgba(0, 0, 0, 0.4);
  color: #2b93ed;
  width: 152rpx;
  height: 70rpx;
  background: rgba(43, 147, 237, 0.1);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-sm;
  position: fixed;
  z-index: 999999;
  &.transition {
    transition: left 0.3s ease, top 0.3s ease;
  }
}
</style>
